<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-20 18:38:29
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-10-23 09:09:44
 * @FilePath: \uni-preset-vue-vite-ts\src\pages\my\passenger\index.vue
 * @Description: 
 * qq1908552310
-->
<template>
    <div class="passenger_container">
        <div class="passenger_header">
            <Header :title="data.title"></Header>
            <div class="header_user" v-if="loginType.type == 'login'">
                <img class="userImg" src="../../../static/PNG/1x/Icon/User 36.png" alt="" />
                <div class="tel">{{ loginType.username }}</div>
                <div class="tab_account"><span @click="loginTabUser">切换账号</span><img class="accountright"
                        src="../../../static//PNG//1x//Icon//Arrow Right 2.png" alt=""></div>
            </div>
        </div>
        <div class="passenger_main">
            <div class="addpassenger" v-if="data.title == '乘客'">
                <img class="addIcon" src="../../../static/PNG/1x/Icon/添加.png" alt="">
                <span @click="AddUser">新增乘客</span>
            </div>
            <div class="addpassenger" v-else>
                <img class="addIcon" src="../../../static/PNG/1x/Icon/扫描证件.png" alt="">
                <span @click="Scan">扫描证件添加</span>
            </div>
            <div class="passenger_list" v-if="data.title == '乘客'">

                <div class="list_header">下拉可刷新乘客列表</div>
                <div class="list" v-for="(item, index) in RenderList.list" :key="index">
                    <uni-list-item :title="item.name" :note="item.certificatetype + item.idnumber" showArrow
                        thumb-size="lg">
                        <template v-slot:header>
                            <view class="slot-box">
                                <image class="slot-image" style="width: 58rpx;height:58rpx;"
                                    src="../../../static/PNG/1x/Icon/Add.png" mode="widthFix"></image>
                            </view>
                        </template>
                    </uni-list-item>

                </div>

            </div>
            <div class="addUserContainer" v-else>
                <div class="form_list">
                    <uni-forms :modelValue="FromModule.baseFormData" :border="true" label-width="100px" label-align="left">
                        <uni-forms-item label="乘客类型">
                            <uni-data-select v-model="FromModule.baseFormData.psgtype"
                                :localdata="FromModule.psgtypeRange"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item>
                            <template #label style="width: 100px;margin:auto">
                                <span>名字 </span> <img style="width: 30rpx;height:30rpx"
                                    src="../../../static/PNG/1x/Icon/Help.png" alt="">
                            </template>
                            <uni-easyinput :inputBorder="false" v-model="FromModule.baseFormData.name"
                                placeholder="与乘客证件姓名一致" />
                        </uni-forms-item>
                        <uni-forms-item label="身份证">
                            <uni-data-select v-model="FromModule.baseFormData.certificatetype"
                                :localdata="FromModule.certificatetypeRange"></uni-data-select>
                        </uni-forms-item>
                        <uni-forms-item label="身份证号">
                            <uni-easyinput type="idcard" :inputBorder="false" v-model="FromModule.baseFormData.idnumber"
                                placeholder="请输入身份证号" />
                        </uni-forms-item>
                        <uni-forms-item label="手机号">
                            <uni-easyinput type="number" :inputBorder="false" v-model="FromModule.baseFormData.phone"
                                placeholder="请输入手机号" />
                        </uni-forms-item>
                    </uni-forms>
                </div>
                <button type="primary" @click="submit">提交</button>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
/* 
_id

psgtype
name
certificatetype
idnumber
phone */
import Header from '@/components/Header.vue'
import { reactive, onMounted, ref } from 'vue'
import { usePagStore } from '@/modules/passenger'
import { onReady, onLoad } from '@dcloudio/uni-app'


const idCardInfo = ref(null);

const PagStore = usePagStore()
const RenderList: any = reactive({
    list: []
})
const FromModule = reactive({
    baseFormData: {
        psgtype: '',
        name: '',
        certificatetype: '',
        idnumber: '',
        phone: '',
        type: "add"
    },
    psgtypeRange: [
        { value: "成人", text: "成人" },
        { value: "儿童", text: "儿童" },
        { value: "学生", text: "学生" },
        { value: "老人", text: "老人" },
        { value: "青年", text: "青年" },
    ],
    certificatetypeRange: [
        { value: "身份证", text: "身份证" },
        { value: "护照", text: "护照" },
        { value: "学生证", text: "学生证" },
        { value: "居民证", text: "居民证" },
        { value: "驾驶证", text: "驾驶证" },
    ],
    // 校验规则
    rules: {
        name: {
            rules: [{
                required: true,
                errorMessage: '姓名不能为空'
            }]
        },
        age: {
            rules: [{
                required: true,
                errorMessage: '年龄不能为空'
            }, {
                format: 'number',
                errorMessage: '年龄只能输入数字'
            }]
        }
    },
})

const data = reactive({
    type: "get",
    title: "乘客",
})

const loginType: any = reactive({
    type: uni.getStorageSync('type') || "",
    username: uni.getStorageSync('username') || ""
})
const loginTabUser = () => {
    uni.navigateTo({
        url: "/pages/login/tabuser/index"
    })
}

// 新增乘客
const AddUser = () => {
    data.type = "add"
    data.title = "新增乘客"
}

const submit = () => {
    PagStore.addPsg(FromModule.baseFormData)
    console.log(PagStore.addMessage, "addMessage")
    setTimeout(() => {
        uni.showToast({
            title: PagStore.addMessage.message,
            icon: "success"
        })
        data.type = "get"
        data.title = "乘客"
        GetPag()
    }, 1000)
}



// 扫描证件
const Scan = () => {

}

const GetPag = async () => {
    await PagStore.getPsg(data)
    RenderList.list = PagStore.count
}
onMounted(() => {
    GetPag()
})
</script>

<style scoped lang="scss">
.passenger_container {

    width: 100%;
    height: 100%;

    .passenger_header {
        width: 100%;
        height: 200px;
        background-color: rgba(27, 169, 186);


        .header_user {
            width: 700rpx;
            height: 100rpx;
            position: absolute;
            left: 15px;
            top: 120px;
            display: flex;
            justify-content: space-between;

            .userImg {
                width: 56px;
                height: 100%;
            }

            .tel {
                line-height: 100rpx;
                width: 360rpx;
                color: #fff;
                font-weight: 800;
            }

            .tab_account {
                width: 98px;
                line-height: 100rpx;
                color: #fff;
                display: flex;
                align-items: center;

                .accountright {
                    width: 30px;
                    height: 30px;
                }
            }
        }
    }

    .passenger_main {
        padding-top: 10px;
        width: 100%;
        height: 77.4%;
        background-color: #edecec;
        margin: 0 auto;

        .addpassenger {
            width: 95%;
            height: 100rpx;
            background: #fff;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;

            .addIcon {
                width: 50rpx;
                height: 50rpx;
            }
        }

        .addpassenger:active {
            background: #f9f9f9;
        }

        .passenger_list {
            width: 95%;
            height: 600px;
            overflow-y: auto;
            background-color: #fdfcfc;
            margin: 10px auto;
            position: relative;

            .list_header {
                width: 100%;
                height: 40px;
                text-align: center;
                line-height: 40px;
                color: #a6a6a6;
            }

            .list {
                width: 95%;
                margin: 10px auto;
            }
        }

        .addUserContainer {
            width: 95%;
            background-color: #ffffff;
            margin: 10px auto;

            .form_list {
                width: 93%;
                margin: 10px auto;
            }
        }
    }
}

.slot-box {
    /* #ifndef APP-NVUE */
    display: flex;
    margin-right: 10px;
    /* #endif */
    flex-direction: row;
    align-items: center;
}

.uni-select uni-select {
    border: none;
}
</style>